<template>
	<div class="listBody">
		<nav-bar :title="title"></nav-bar>
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="card" v-for="(item, index) in list" :key="item.id || index" @click="detail(item.jobId || item.id)">
					<div class="top">
						<h2 class="title">{{ item.title || item.opJob.jobName }}</h2>
						<span class="salary" v-if="item.opJob">{{ item.opJob.minMoney | salaryFilter(item.opJob.maxMoney) }}</span>
						<span class="salary" v-else>{{ item.minMoney | salaryFilter(item.maxMoney) }}</span>
					</div>
					<p class="types">
						{{ item.jobCity_dictText || item.opJob.jobArea }}
						<span class="divider"></span>
						{{ item.eduLevel_dictText || edulevelFilter(item.opJob) }}
						<span class="divider"></span>
						{{ item.opJob ? experienceFilter(item.opJob) : experienceFilter(item) }}
						<span class="divider"></span>
						{{ item.needCount || item.opJob.needCount }}人
					</p>
					<p class="compony" v-if="item.companyName">{{ item.companyName }}</p>
				</div>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script>
import { baseSo, myList } from '@/api/api';
import { List, PullRefresh, Divider } from 'vant';
import navBar from '@/components/navBar.vue';
export default {
	//组件注入
	components: { navBar, vanList: List, vanPullRefresh: PullRefresh, divider: Divider },
	filters: {
		salaryFilter(a, b) {
			if (a >= 1000) {
				return a / 1000 + 'K' + '-' + b / 1000 + 'K';
			} else {
				return a + '-' + b;
			}
		}
	},
	//存放数据
	data() {
		return {
			list: [],
			loading: false,
			finished: false,
			refreshing: false,
			listQuery: {
				pageNo: 1,
				pageSize: 10
			},
			type: 0,
			prams: null,
			title: ''
		};
	},
	//监控data中的数据变化
	watch: {},
	//方法集合
	methods: {
		experienceFilter(e) {
			const experience = e.minExperience + ',' + e.maxExperience;
			const res = this.$store.state.experience.find(item => item.value === experience);
			return res.label;
		},
		edulevelFilter(e) {
			const level = e.eduLevel + '';
			const res = this.$store.state.eduLevels.find(item => item.value === level);
			console.log(res);
			return res.label;
		},
		onLoad() {
      if (!this.prams){
        this.prams = {type: 'job'}
      }
			if (parseFloat(this.type) !== 2) {
				baseSo(Object.assign(this.prams, this.listQuery))
					.then(response => {
						if (response.result.current == 1) this.list = response.result.records;
						else this.list = this.list.concat(response.result.records);
						if (response.result.current >= response.result.pages) {
							this.finished = true;
						} else {
							this.listQuery.pageNo++;
						}
					})
					.finally(() => {
						this.loading = false;
						this.refreshing = false;
					});
				if (parseFloat(this.type) === 1) {
					this.title = '同类职位推荐';
				} else {
					this.title = '该公司其他职位';
				}
			} else {
				myList(this.listQuery)
					.then(response => {
						if (response.result.current == 1) this.list = response.result.records;
						else this.list = this.list.concat(response.result.records);
						if (response.result.current >= response.result.pages) {
							this.finished = true;
						} else {
							this.listQuery.pageNo++;
						}
					})
					.finally(() => {
						this.loading = false;
						this.refreshing = false;
					});
				this.title = '看过的职位';
			}
		},
		onRefresh() {
			// 清空列表数据
			this.finished = false;

			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.loading = true;
			this.listQuery.pageNo = 1;
			this.onLoad();
		},
		detail(id) {
			this.$router.push({ path: '/jobDetails', query: { id } });
		}
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {
		this.type = this.$route.query.type;
		this.prams = this.$route.query.prams && JSON.parse(decodeURI(this.$route.query.prams));
		this.onLoad();
	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {}
};
</script>
<style lang="scss" scoped>
@import '../../styles/mixin.scss';
.card {
	padding: 30px;
	background: #fff;
	border-radius: 15px;
	margin: 16px 30px 0px 30px;
	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title {
			font-size: 32px;
			font-weight: 600;
			flex: 1 1 auto;
			display: block;
			@include text-ellipsis;
		}
		.salary {
			font-size: 30px;
			color: #fe3d09;
			flex: 0 0 auto;
			margin-left: 20px;
		}
	}
	.types {
		// display: flex;
		font-size: 24px;
		// align-items: center;
		margin-top: 20px;
		// flex-wrap: wrap;
		line-height: 40px;
		.divider {
			// display: block;
			display: inline-block;
			vertical-align: middle;
			width: 1px;
			height: 24px;
			margin: 0 15px;
			background: #e2e2e2;
		}
	}
	.compony {
		margin-top: 25px;
		font-size: 24px;
		color: #999;
	}
}
.listBody {
	min-height: 100vh;
}
</style>
